<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>themes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
		  <a class="navbar-brand" href="#">Themes</a>
	      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
	        <span class="navbar-toggler-icon"></span>
	      </button>

	      <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
	        <ul class="navbar-nav">
	          <li class="nav-item active pl-2 pr-5">
	            <a class="nav-link" href="#">Themes</a>
	          </li>
	          <li class="nav-item active pl-2 pr-5">
	            <a class="nav-link" href="#">About</a>
	          </li>
	          <li class="nav-item active pl-2 pr-5">
	            <a class="nav-link" href="#">FAQ</a>
	          </li>
	        </ul>
	      </div>
	  </nav>
    </div>
  </header>
  <div class="banner">
    <div class="container">
      <div class="loge-text">B</div>
      <h1>Themes</h1>
      <p class="text-secondary">Customize and exten</p>
      <button type="button" class="btn">Explore</button>
    </div>
  </div>
  <main>
    <div class="container">
      <div class="row Alternative-Image">
        <div class="col-sm-4 text-center">
          <img src="img/tobiao-1.png" alt="">
          <p class=" font-weight-bold">Components and examples</p>
          <p class="text-secondary">Each theme features new components</p>
        </div>
        <div class="col-sm-4 text-center">
          <img src="img/tobiao-2.png" alt="">
          <p class=" font-weight-bold">Components and examples</p>
          <p class="text-secondary">Each theme features new components</p>
        </div>
        <div class="col-sm-4 text-center">
          <img src="img/tobiao-3.png" alt="">
          <p class=" font-weight-bold">Components and examples</p>
          <p class="text-secondary">Each theme features new components</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-center"><h4>Team</h4></div>
      </div>
      <div class="row text-center">
        <div class="col-sm-4">
          <div class=" main-bgg-"> 
              <div class="main-bgg-1"></div>
	          <img src="img/avatar-dhg.png" alt="">
	          <p>Jacob Thornton</p>
	          <p>Creator of Bootstrap,engineer at Twitter &Medium.Founder of Bumpers</p>
	          <button type="button" class="btn">View GitHub</button>
          </div>
        </div>
        <div class="col-sm-4">
          <div class=" main-bgg-"> 
              <div class="main-bgg-2"></div>
	          <img src="img/avatar-fat.jpg" alt="">
	          <p>Jacob Thornton</p>
	          <p>Creator of Bootstrap,engineer at Twitter &Medium.Founder of Bumpers</p>
	          <button type="button" class="btn">View GitHub</button>
          </div>
        </div>
        <div class="col-sm-4">
          <div class=" main-bgg-"> 
              <div class="main-bgg-3"></div>
	          <img src="img/avatar-mdo.jpg" alt="">
	          <p>Jacob Thornton</p>
	          <p>Creator of Bootstrap,engineer at Twitter &Medium.Founder of Bumpers</p>
	          <button type="button" class="btn">View GitHub</button>
          </div>
        </div>
      </div>
      <div class="main-top-border">
	      <div class="row ">
	        <div class="col-sm-6"><h5>C'mon,cgeck out the themes!</h5><p>Now you know what we're about,so peep the goods!</p></div>
	        <div class="col-sm-6  button-center"><button type="button" class="btn">Explore</button></div>
	      </div>
	  </div>
    </div>
  </main>
  <footer>
    <div class="container">
      <ul class="nav justify-content-center">
	    <li class="nav-item">
	      <a class="nav-link" href="#">About</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Terms</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Privac</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Licenses</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">FAQ</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Bootstrap</a>
	    </li>
	  </ul>
    </div>
  </footer>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>